<template>
	<view class="page-user">
		<view class="bgwhite">
			<view class="info_main">
				<view>头像</view>
				<view class="" style="width: 120upx; height: 120upx; background-color:aliceblue; border-radius: 50%;">
					<avatar selWidth="400upx" selHeight="400upx" @upload="myUpload" :avatarSrc="userInfo.avatar" avatarStyle="width: 120upx; height: 120upx; "></avatar>
				</view>
			</view>
			<view class="info_cont">
				<view>昵称</view>
				<input class="color999" v-model="userInfo.nickname" type="text" placeholder="输入中文或英文，1~8个字" />
			</view>
			<view class="info_cont" @click="show_sex_picker = true">
				<view>性别</view>
				<text class="iconfont icon-fanhui1"></text>
				<view class="color999 uni-input">{{ userInfo.sex || '请选择性别' }}</view>
			</view>
			<view class="info_cont" @click="show_date_picker = true">
				<view>生日</view>
				<text class="iconfont icon-fanhui1"></text>
				<view class="color999 uni-input">{{ userInfo.birthday || '请选择生日' }}</view>
			</view>
			<view class="info_cont" @click="show_addr_picker = true">
				<view>所在地</view>
				<text class="iconfont icon-fanhui1"></text>
				<view class="color999 uni-input">{{ userInfo.addr || '请选择地址' }}</view>
			</view>
			<view class="info_cont">
				<view>手机号</view>
				<text class="iconfont icon-fanhui1"></text>
				<input class="color999" type="text" :value="userInfo.username" disabled="true" />
			</view>
		</view>
		<view class="confirm-btn" @click="reviseInformation">确定</view>
		<!-- 性别picker -->
		<w-picker :visible.sync="show_sex_picker" mode="selector" :options="sex_arr" value="女" @confirm="onConfirm($event, 'sex')" @cancel="onCancel" ref="selector"></w-picker>
		<!-- 日期picker -->
		<w-picker
			:visible.sync="show_date_picker"
			mode="date"
			startYear="1920"
			endYear="2021"
			:current="true"
			fields="day"
			@confirm="onConfirm($event, 'date')"
			@cancel="onCancel"
			:disabled-after="false"
			ref="date"
		></w-picker>
		<!-- 地址picker -->
		<w-picker
			:visible.sync="show_addr_picker"
			mode="region"
			:value="userInfo.addr_code"
			default-type="value"
			:hide-area="false"
			@confirm="onConfirm($event, 'region')"
			@cancel="onCancel"
			ref="region"
		></w-picker>
	</view>
</template>

<script>
import wPicker from '@/components/w-picker/w-picker.vue';
import avatar from '@/components/yq-avatar/yq-avatar';
export default {
	data() {
		return {
			requt: 'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http',
			avatarSrc: '',
			nickname: '',
			show: false,
			msg: '', //头像子组件传过来的参
			avatar: '',
			path: '',
			index: '',
			data: '',
			base64: '',
			show_date_picker: false,
			show_sex_picker: false,
			show_addr_picker: false,
			sex_arr: [
				{
					label: '男'
				},
				{
					label: '女'
				}
			],
		};
	},
	components: {
		avatar,
		wPicker
	},
	computed: {
		userInfo() {
			return {
				...this.$store.state.userInfo
			};
		}
	},
	methods: {
		//上传图片
		myUpload(e) {
			console.log(e);
			console.log(this.userInfo);
			this.userInfo.avatar = e.path;
			this.$forceUpdate()
		},
		//修改资料接口
		reviseInformation() {
			let uid = uni.getStorageSync('uid');
			// let uid = this.$store.state.uid;
			let { avatar, nickname, sex, birthday, addr, addr_code } = this.userInfo;
			uni.request({
				url: this.requt + '/user/editUserInfo',
				method: 'POST',
				data: {
					avatar,
					nickname,
					sex,
					birthday,
					addr,
					addr_code,
					uid
				},
				success: res => {
					console.log(res);
				},
				fail: err => {
					console.error(err);
				}
			});
			uni.navigateBack({
				delta:1,
			})
		},
		// picker确定按钮
		onConfirm(e, type) {
			if (type == 'sex') {
				this.userInfo.sex = e.result;
			}
			if (type == 'date') {
				this.userInfo.birthday = e.result;
			}
			if (type == 'region') {
				this.userInfo.addr = e.result;
				this.userInfo.addr_code = e.value;
			}
		}
	}
};
</script>

<style lang="scss">
.bgwhite {
	background: #fff;
}
.page-user {
	width: 100%;
	height: 100%;

	.info_main {
		width: 100%;
		height: 151upx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		padding: 0 30upx;

		view {
			font-size: 30upx;
			color: #999999;
		}

		image {
			float: right;
			width: 94upx;
			height: 94upx;
			border-radius: 50%;
		}
	}

	.info_main:after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #eeeeee;
	}

	.info_cont {
		width: 100%;
		height: 101upx;
		position: relative;
		overflow: hidden;
		padding: 0 30upx;

		view {
			font-size: 30upx;
			line-height: 101upx;
			color: #999999;
			float: left;
		}

		.txt {
			display: block;
			width: auto;
			height: 101upx;
			float: right;
			text-align: right;
			margin-right: 10upx;
			font-size: 30upx;
			width: 500upx;
		}

		.uni-input,
		input {
			display: block;
			width: auto;
			height: 101upx;
			float: right;
			text-align: right;
			margin-right: 10upx;
			font-size: 30upx;
			width: 500upx;
		}

		text {
			font-size: 14upx;
			color: #bfbfbf;
			float: right;
			line-height: 101upx;
		}

		.iconfont {
			font-size: 28upx;
		}
	}

	.uni-input-placeholder {
		color: #999;
	}

	.info_cont:after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #eeeeee;
	}
}

.confirm-btn {
	width: 80%;
	height: 80upx;
	background: #fdd100;

	border-radius: 60upx;
	margin: 40upx auto;

	text-align: center;
	color: #fff;
	line-height: 80upx;
	font-size: 30upx;
}
</style>
